<template>
  <div>
    <mt-tabbar fixed>
      <!--
      <mt-tab-item id="预约">
        <nuxt-link :to="{name:'yuyue-doctorpaiban'}" tag="i" class="iconfont icon-yuyue">
        </nuxt-link>
        预约
      </mt-tab-item>
      -->
      <mt-tab-item id="医生">
        <nuxt-link :to="{name:'doctor-doctorlist', query:{isshow:1}}" tag="i"><!--  class="iconfont icon-yuyue" -->
          <svg fill="#aaa" :class="{selectedStyle : currentShowback == 1}" style="" viewBox="0 0 1024 1024"
            width="25" height="25"
          ><defs><style type="text/css"></style></defs><path d="M563.2 179.2h-25.6v-25.6c0-12.8-12.8-25.6-25.6-25.6s-25.6 12.8-25.6 25.6v25.6h-25.6c-12.8 0-25.6 12.8-25.6 25.6s12.8 25.6 25.6 25.6h25.6v25.6c0 12.8 12.8 25.6 25.6 25.6s25.6-12.8 25.6-25.6v-25.6h25.6c12.8 0 25.6-12.8 25.6-25.6s-12.8-25.6-25.6-25.6z"></path><path d="M686.08 596.48c51.2-46.08 81.92-112.64 81.92-186.88V117.76c0-10.24-5.12-20.48-15.36-23.04-33.28-12.8-122.88-43.52-240.64-43.52s-204.8 30.72-240.64 43.52c-10.24 5.12-15.36 12.8-15.36 23.04v281.6c0 76.8 33.28 145.92 84.48 197.12-135.68 30.72-238.08 153.6-238.08 299.52 0 43.52 33.28 76.8 76.8 76.8h665.6c43.52 0 76.8-33.28 76.8-76.8 0-145.92-99.84-266.24-235.52-299.52z m-174.08 296.96l-87.04-69.12-87.04-64 33.28-81.92 145.92 212.48-5.12 2.56z m-102.4-250.88c25.6 12.8 53.76 20.48 84.48 20.48h17.92c35.84 0 71.68-7.68 102.4-23.04l-99.84 151.04-104.96-148.48z m135.68 197.12l107.52-161.28 33.28 79.36-87.04 66.56-40.96 33.28-12.8-17.92z m-238.08-442.88c48.64-17.92 117.76-38.4 204.8-38.4 25.6 0 48.64 2.56 74.24 5.12 12.8 2.56 28.16-7.68 28.16-23.04 2.56-12.8-7.68-28.16-23.04-28.16-25.6-2.56-53.76-5.12-79.36-5.12-87.04 0-161.28 20.48-204.8 35.84v-207.36c38.4-12.8 110.08-33.28 204.8-33.28s166.4 20.48 204.8 33.28v207.36c-7.68-2.56-17.92-5.12-28.16-10.24-12.8-5.12-28.16 2.56-30.72 17.92-5.12 12.8 2.56 28.16 17.92 30.72 15.36 5.12 30.72 10.24 43.52 15.36v12.8c0 112.64-92.16 204.8-204.8 204.8h-12.8c-107.52-7.68-192-99.84-192-212.48v-5.12z m-153.6 499.2c0-112.64 71.68-207.36 171.52-240.64l-33.28 84.48c-7.68 20.48-2.56 46.08 17.92 58.88l87.04 64 71.68 56.32H179.2c-15.36 2.56-25.6-7.68-25.6-23.04z m691.2 25.6h-243.2l-15.36-23.04 43.52-33.28 87.04-64c17.92-12.8 25.6-38.4 17.92-58.88l-33.28-84.48c99.84 35.84 171.52 130.56 171.52 240.64-2.56 12.8-12.8 23.04-28.16 23.04z"></path></svg>
          <span :class="{selectedStyleys : currentShowback == 1}">医生</span>
        </nuxt-link>
      </mt-tab-item>
      <mt-tab-item id="处方">
        <nuxt-link :to="{name:'chufang-prescribeRecord', query:{isshow:2}}" tag="i"><!--  class="iconfont icon-prescription" -->
          <svg fill="#aaa" :class="{selectedStyle : currentShowback == 2}" style="" viewBox="0 0 1024 1024"
            width="25" height="25"
          ><defs><style type="text/css"></style></defs><path d="M557.909333 85.376c6.016 0 10.908444 4.892444 10.908445 10.922667l-0.042667 0.839111-2.375111 30.648889h65.692444c6.926222 0 13.127111 3.882667 16.199112 10.154666l7.808 15.928889h111.644444a67.185778 67.185778 0 0 1 67.100444 67.114667v589.525333a66.702222 66.702222 0 0 1-19.683555 47.431111 66.631111 66.631111 0 0 1-47.416889 19.683556H288.910222a67.185778 67.185778 0 0 1-67.114666-67.114667V220.970667a67.185778 67.185778 0 0 1 67.114666-67.114667h111.630222l7.808-15.928889c3.072-6.257778 9.272889-10.154667 16.199112-10.154667h65.692444l-2.389333-30.634666-0.042667-0.839111a10.951111 10.951111 0 0 1 10.922667-10.922667h59.178666m0-28.444444h-59.178666a39.395556 39.395556 0 0 0-39.239111 42.410666H424.533333a46.535111 46.535111 0 0 0-41.742222 26.069334h-93.895111a95.658667 95.658667 0 0 0-95.559111 95.559111v589.525333a95.658667 95.658667 0 0 0 95.559111 95.559111h478.833778a95.658667 95.658667 0 0 0 95.544889-95.559111V220.970667a95.658667 95.658667 0 0 0-95.544889-95.559111h-93.909334a46.492444 46.492444 0 0 0-41.728-26.069334h-34.958222a39.395556 39.395556 0 0 0-39.224889-42.410666z"></path><path d="M627.143111 177.294222H429.482667c-21.162667 0-40.746667-11.946667-51.072-31.175111l25.059555-13.468444c5.361778 9.998222 15.345778 16.213333 26.026667 16.213333h197.646222c10.666667 0 20.650667-6.215111 26.026667-16.213333l25.059555 13.468444c-10.368 19.228444-29.937778 31.175111-51.086222 31.175111zM705.336889 380.387556H350.805333c-24.504889 0-44.444444-19.939556-44.444444-44.444445s19.939556-44.430222 44.444444-44.430222h354.531556a44.487111 44.487111 0 0 1 44.444444 44.430222 44.501333 44.501333 0 0 1-44.444444 44.444445z m-354.531556-60.430223c-8.817778 0-16 7.168-16 15.985778s7.182222 16 16 16h354.531556c8.817778 0 16-7.182222 16-16 0-8.803556-7.182222-15.985778-16-15.985778H350.805333zM705.336889 506.282667H350.805333c-24.504889 0-44.444444-19.939556-44.444444-44.444445s19.939556-44.444444 44.444444-44.444444h354.531556a44.487111 44.487111 0 0 1 44.444444 44.444444 44.515556 44.515556 0 0 1-44.444444 44.444445z m-354.531556-60.444445c-8.817778 0-16 7.182222-16 16s7.182222 16 16 16h354.531556c8.817778 0 16-7.182222 16-16s-7.182222-16-16-16H350.805333zM705.336889 632.163556H350.805333c-24.504889 0-44.444444-19.939556-44.444444-44.444445s19.939556-44.444444 44.444444-44.444444h354.531556c24.504889 0 44.444444 19.939556 44.444444 44.444444s-19.939556 44.444444-44.444444 44.444445z m-354.531556-60.444445c-8.817778 0-16 7.182222-16 16s7.182222 16 16 16h354.531556c8.817778 0 16-7.182222 16-16s-7.182222-16-16-16H350.805333zM705.336889 758.058667H350.805333c-24.504889 0-44.444444-19.939556-44.444444-44.444445s19.939556-44.444444 44.444444-44.444444h354.531556c24.504889 0 44.444444 19.939556 44.444444 44.444444s-19.939556 44.444444-44.444444 44.444445z m-354.531556-60.444445c-8.817778 0-16 7.182222-16 16s7.182222 16 16 16h354.531556c8.817778 0 16-7.182222 16-16s-7.182222-16-16-16H350.805333z"></path></svg>
          <span :class="{selectedStyleys : currentShowback == 2}">处方</span>
        </nuxt-link>
      </mt-tab-item>
      <mt-tab-item id="我的">
        <nuxt-link :to="{name:'wode-wode', query:{isshow:3}}" tag="i"><!--  class="iconfont icon-weibiaoti2fuzhi12" -->
          <svg fill="#aaa" :class="{selectedStyle : currentShowback == 3}" style="" viewBox="0 0 1024 1024"
            width="25" height="25"
          ><defs><style type="text/css"></style></defs><path d="M768 665.6c-6.4-6.4-12.8-12.8-19.2-12.8-19.2 0-32 12.8-32 32 0 12.8 6.4 19.2 12.8 25.6l0 0 0 0c76.8 57.6 128 147.2 134.4 249.6l57.6 0C915.2 838.4 857.6 736 768 665.6M524.8 556.8c-115.2 0-211.2-96-211.2-211.2C307.2 224 403.2 128 524.8 128c115.2 0 211.2 96 211.2 211.2C736 460.8 640 556.8 524.8 556.8zM800 345.6c0-153.6-121.6-281.6-281.6-281.6C371.2 64 243.2 185.6 243.2 345.6c0 102.4 57.6 192 140.8 243.2C224 633.6 108.8 780.8 102.4 960l57.6 0C166.4 774.4 320 627.2 505.6 620.8l6.4 0c6.4 0 6.4 0 12.8 0C678.4 620.8 800 499.2 800 345.6z"></path></svg>
          <span :class="{selectedStyleys : currentShowback == 3}">我的</span>
        </nuxt-link>
      </mt-tab-item>
    </mt-tabbar>
  </div>
</template>
<script>

export default {
  props: ['isshowback'],
  transition: {
    name: 'page',
    mode: 'out-in',
  },
  data() {
    return {


      /**
       * 
       * 由于父组件updated()方法中更改了this.activeIndex值，update方法除了父组件触发这个方法，
       * 子组件也会触发，即子组件会更改activeIndex的值，但是由于父子组件的传递机制，
       * 会造成报错Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders....
       * 简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。
       * 
       * 在子组件使用该值时需要经过新变量（currentShowback）重新传递，这样当这个值变更时，不会造activeIndex的更改
       */
      currentShowback: this.isshowback,


      
    };
  },
  beforeCreated() {
  },
  created() {
    if (this.currentShowback == null || this.currentShowback == '' || this.currentShowback == undefined || this.currentShowback == 'undefined') {
      this.currentShowback = 1;
    }
  },
  mounted() {
  },
  methods: {
  },

};

</script>
<style lang="stylus" scoped>
.selectedStyle
  fill: #26a2ff
  font-size: .9rem;
.selectedStyleys
  color: #26a2ff
  font-size: .9rem;
.mint-tab-item-label
  font-size 0.9rem
.mint-tabbar
  border-top 1px solid #f1f1f1
  background #fff
  a
    color #aaa
  i
    display block
    font-size 1.8rem
    color #aaa
  .nuxt-link-active
    color:#26a2ff;
  .mt-tab-item-active
    color:#26a2ff;
.mint-tabbar i {
  display: inline-flex;
  font-size: .9rem;
  color: #aaa;
  flex-flow: column;
  justify-content: center;
  align-items: center;
}
</style>

